import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { Checkbox } from 'antd';
import EnumConfig from './enumConfig';
import { connect } from 'react-redux';
import { compareClass } from '../../../utils/compare';

const ParamsTypeSet = (props) => {
  const { parame_type, func_param_limit_scope, value, refInstance, disabled } = props;
  const [enumsValueJson, setEnumsValueJson] = useState([]);
  useImperativeHandle(refInstance, () => ({
    getJson: () => {
      console.log(enumsValueJson);
      let temp = [...enumsValueJson];
      return temp;
    },
  }));

  useEffect(() => {
    console.log(value);
    if (value) {
      let temp = [...value];
      setEnumsValueJson(temp);
    }
  }, [value]);

  useEffect(() => {}, [parame_type]);

  const onChange = (value) => {
    console.log('xxx', value);
    setEnumsValueJson(value);
  };

  return parame_type === 1 ? (
    <Checkbox.Group value={enumsValueJson} onChange={onChange} disabled={disabled} className={compareClass(props)}>
      {func_param_limit_scope.map((item) => (
        <Checkbox key={item.id} value={item.key}>
          {item.value}
        </Checkbox>
      ))}
    </Checkbox.Group>
  ) : (
    <EnumConfig {...props} onChange={onChange} value={enumsValueJson} disabled={disabled} />
  );
};

const mapStateToProps = (state) => {
  return {
    func_param_limit_scope: state.code.func_param_limit_scope || [],
  };
};

const Component = connect(mapStateToProps)(ParamsTypeSet);
export default forwardRef((props, ref) => <Component {...props} refInstance={ref} />);
